{% block js %}
  <script type="text/javascript">
    var initial_states = {
      userLogged: {% if user_email -%} true {%- else -%} false {%- endif %}
    };
  </script>
{% endblock %}
<div class="row heading">
	<div class="small-12 title-heading">
		<h1 class="bold">{{astroboxName}}</h1>
	</div>
</div>

<div id="app-container" class="row">
	<div class="alert-box warning serial-log radius">
		Your serial log is <b>enabled</b>. This will produce a large amount of data - <a href="#settings/software-advanced">Disable here</a>
	</div>
	{% if checkSoftware %}
		<div class="alert-box alert new-release radius hide">
			<i class="icon-download-cloud"></i> A <b>new software</b> update is available - <a href="#" class="check button success radius">More info</a>
			<a href="#" class="close">&times;</a>
		</div>
	{% endif %}
	<ul class="small-block-grid-3 large-block-grid-6">
		<li>
			<span class="upload-btn expand">
				<div class="app-image">
					<img src="/static/img/upload-icon.png" alt="file upload icon"/>
					<div class="overlay">
						<div class="contain"><h4 class="bold">Upload</h4></div>
						<input class="file-upload" type="file" name="file" data-url="/ajax/designs/upload" accept=".stl, .gcode, .gco">
					</div>
					<div class="progress">
						<span class="bold">0<i>%</i></span>
					</div>
					<div class="failed">
						<i class="icon-attention"></i>
					</div>
				</div>
			</span>
			<h1 class="bold">File Uploader</h1>
		</li>

		<li>
			<a href="#files"><div class="app-image">
				<img src="/static/img/file-manager-icon.png" alt="file manager icon"/>
				<div class="overlay"><div class="contain"><h4 class="bold">Launch</h4></div></div></div>
			</a>
				<h1 class="bold">File Manager</h1>
    </li>
    <li>
			<a id="queue-app"><div class="app-image">
				<img src="/static/img/print-queues.png" alt="print queue icon"/>
				<div class="overlay"><div class="contain"><h4 class="bold">Launch</h4></div></div></div>
			</a>
				<h1 class="bold">Print Queue</h1>
		</li>
		<li>
			<a href="#utilities"><div class="app-image">
				<img src="/static/img/control-icon.png" alt="control icon"/>
				<div class="overlay"><div class="contain"><h4 class="bold">Launch</h4></div></div></div>
			</a>
				<h1 class="bold">Utilities</h1>
		</li>
		<li>
			<a href="#camera"><div class="app-image">
				<img src="/static/img/camera-icon.png" alt="camera icon"/>
				<div class="overlay"><div class="contain"><h4 class="bold">Launch</h4></div></div></div>
			</a>
				<h1 class="bold">Camera</h1>
		</li>
		<li>
			<a href="#settings"><div class="app-image">
				<img src="/static/img/settings-icon.png" alt="settings icon"/>
				<div class="overlay"><div class="contain"><h4 class="bold">Launch</h4></div></div></div>
			</a>
				<h1 class="bold">Settings</h1>
		</li>
    {% if mfDefinition.variant.additional_custom_tasks and additionalTasks %}
    <li>
			<a href="#additional-tasks"><div class="app-image tasks">
				<img src="/static/img/tasks-icon.svg" alt="custom icon"/>
				<div class="overlay"><div class="contain"><h4 class="bold">Launch</h4></div></div></div>
			</a>
				<h1 class="bold">Tasks</h1>
		</li>
    {% endif %}
    {% if maintenanceMenu %}
    <li>
			<a href="#maintenance-menu"><div class="app-image maintentance-menu">
				<img src="/static/img/printer-maintenance-icon.svg" alt="custom icon"/>
				<div class="overlay"><div class="contain"><h4 class="bold">Launch</h4></div></div></div>
			</a>
				<h1 class="bold">Printer Maintenance</h1>
		</li>
    {% endif %}
		<li class="gcode-terminal-app-icon">
			<a href="#gcode-terminal"><div class="app-image">
				<img src="/static/img/gcode-terminal-icon.png" alt="settings icon"/>
				<div class="overlay"><div class="contain"><h4 class="bold">Launch</h4></div></div></div>
			</a>
				<h1 class="bold">GCODE Terminal</h1>
		</li>
		<li>
			<a href="{{mfDefinition.links.support}}"><div class="app-image">
				<img src="/static/img/support-icon.png" alt="support icon"/>
				<div class="overlay"><div class="contain"><h4 class="bold">Get Help</h4></div></div></div>
			</a>
				<h1 class="bold">Help</h1>
		</li>
		{% if mfDefinition.links.supplies %}
		<li>
			<a href="{{mfDefinition.links.supplies}}"><div class="app-image">
				<img src="/static/img/supplies-icon.png" alt="supplies icon"/>
				<div class="overlay"><div class="contain"><h4 class="bold">Shop</h4></div></div></div>
			</a>
				<h1 class="bold">Supplies</h1>
		</li>
		{% endif %}
	</ul>
</div>
